﻿/*초기화*/
* {margin: 0 auto; padding: 0; font-family:나눔고딕;}
html, body {height: 100%;}
a{text-decoration: none; font-weight: bolder; color: purple;}
dd {margin-top: 5px;}
#main_footer > small > span {margin: 0 5px;}
label {font-weight:bolder; margin-left: 1px; font-size: 1.1em;}
.user {display: none;}
.placeholder:focus {background-color: #444;}

/*layout*/
#top {
    position: fixed;
    width: 100%;
    top: 0; left: 0; right: 0;
    height: 30px;
    background-color: #0d293e;
}
#main_header {
    margin-top: 150px;
    width:620px;
    height: 55px;
    line-height: 55px;
    background-color: orchid;
    border: 1px solid black;
    border-radius: 5px;
}

#content {
    margin-top: 15px;
    width:620px;
}

#main_footer {
    position: fixed;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: right;
    bottom: 0; left: 0; right: 0;

    box-sizing: border-box;
    background-color: #a7a7a7;
    border: 1px solid black;
}

/*detail*/
#main_header > h1 {font-size: 3em; text-align:right; margin-right: 30px;}
#content {
    margin-top: 30px;
    -webkit-animation: login 1s ease-in-out;
	animation: login 1s ease-in-out;
}
#main_footer > small {margin-right: 50px; font-weight: bolder;}
#enrollment {text-align: right; margin-bottom: 20px;}
#enrollment dd {display: inline;}
#enrollment a {margin: 0 5px;}
#information {overflow: hidden; }
#id_pass {width:410px; float:left; text-align: right;}
#keep_login {width: 200px; float: right;}

#information input[type="text"], #information input[type="password"] {
    width: 200px;
	height: 35px;
    background-color: #493f3f;
    color: #a7a7a7;
	font-size: 15px;
	border: 1px solid #a7a7a7;
   
	padding-left: 25px;
	border-radius: 5px;
}

#information input[type="text"]:focus, #information input[type="password"]:focus {
    background-color: #493f3f;
    color: #a7a7a7;
    outline: none;
    border: 2px solid mediumpurple;
}

#information input[type="submit"] {
    width: 110px;
	height: 45px;
	color: black;
	font-size: 20px;
	font-weight: bold;
	outline: none;
	border: 1px solid black;

	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 5px;

	background-color: orchid;

	cursor: pointer;

	-webkit-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

#information input[type="submit"]:hover {
	background-color: #2274e6;
}

#keep_login input:last-child {
    margin-top: 15px;
    display: block;
}


/*Animation*/
@keyframes login {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	    filter: alpha(opacity=0);
   	    opacity: 0;
    }
    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	    filter: alpha(opacity=100);
   	    opacity: 1;
    }
}


@-webkit-keyframes login {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}